<template>
  <!-- 回复评论页面 -->
  <view class="main">
    <!-- 顶部显示 -->
    <view class="roof">
      <view class="left" @click="handleTui">
        <image src="../../imges/shangYe.png" mode="aspectFill"></image>
      </view>
      <view class="text">
        <text>回复评论</text>
      </view>
      <view class="right"></view>
    </view>
    <view class="top">
      <view class="item">
        <view class="left" @tap="toCard(comment.createUid)">
          <image :src="comment.avatarUrl" mode="aspectFill"></image>
        </view>
        <view class="right">
          <view class="one">
            {{ comment.realName }}
          </view>
          <view class="two">
            {{ comment.content }}
          </view>
          <view class="imgs">
            <image
              :src="item"
              mode="aspectFill"
              v-for="(item, index) in comment.picturesUrl"
              @tap.stop="pinlunImgDa(comment.picturesUrl, index)"
              :key="index"
            ></image>
          </view>
          <view class="time">
            <view class="hour"> {{ comment.createTime }} <text>.</text> </view>
          </view>
        </view>
        <view
          class="shanchu"
          v-if="comment.isCreated == 1 || isSelf == 1"
          @tap="pinlunShanchu(comment.messageId, comment.id, 1)"
        >
          <image src="../../imges/shanchu6.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- 其他人评论 -->
    <view class="title">
      {{ commentList.length > 0 ? "全部评论" : "暂无评论" }}
    </view>
    <view class="top" v-if="comment.list">
      <view class="item" v-for="(item, index) in comment.list" :key="index">
        <view class="left" @tap="toCard(item.createUid)">
          <image :src="item.avatarUrl" mode="aspectFill"></image>
        </view>
        <view class="right">
          <view class="one title_">
            <view class="huifu">
              {{ item.realName }}<text> 回复 </text>{{ item.parentName }}
            </view>
            <image
              v-if="item.isCreated == 1 || isSelf == 1"
              src="../../imges/shanchu6.png"
              mode="aspectFill"
              class="shanchu6"
              @tap="pinlunShanchu(item.messageId, item.id)"
            ></image>
          </view>
          <view class="two">
            {{ item.content }}
          </view>
          <view class="time">
            <view class="hour"> {{ item.createTime }} <text>.</text> </view>
            <text @tap="replay(item)" class="huifu"> 回复 </text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="footer">
			已显示全部评论
		</view> -->

    <!-- 评论框 -->
    <view class="input">
      <input
        type="text"
        value=""
        v-model="text"
        :placeholder="huifu ? '回复：' + rName : '写评论...'"
      />
      <text @tap="xiepinlun">发布</text>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      comment: {},
      commentList: [],
      myName: "张三",
      rName: "",
      text: "",
      id: "",
      huifu: false,
      huifuId: "",
      plList: [],
      index: "",
      isSelf: "",
      isShare: "",
    };
  },
  onLoad(option) {
    // this.comment = option.comment.replace(/""/g, "");
    // this.comment = JSON.parse(option.comment)
    // console.log(this.comment)
    this.id = option.id;
    this.index = option.index;
    this.isSelf = option.isSelf;
    if (option.isShare) {
      this.isShare = option.isShare;
    }
    this.pinlunList(option.index);
  },
  methods: {
    toCard(id) {
      uni.navigateTo({
        url: "/pages/index/personal?id=" + id,
      });
    },
    handleTui() {
      if (this.isShare == 1) {
        uni.navigateTo({
          url: "/pages/index/trickDetail?id=" + this.id + "&isShare=1",
        });
      } else {
        window.history.go(-1);
      }
    },
    xiepinlun() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (
        this.text == "" ||
        this.text == undefined ||
        this.text.trim().length == 0
      ) {
        uni.showToast({
          title: "评论不能为空",
          duration: 2000,
          icon: "none",
        });
      } else {
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url:
              "h5/orgMessage/saveComment?uid=63755c41127811e981b5fa163e4d6bc3",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": this.globalData.apiVersion,
              "Source-Type": 7,
              token: token,
            },
            data: {
              messageId: this.id,
              content: this.text,
              parentId: this.huifuId,
            },
          }).then((res) => {
            console.log(res.data.code);
            if (res.data.code == 200) {
              // uni.reLaunch({
              // 	url: '/pages/index/replyComment?index=' + this.index + '&id=' + this.id
              // })
              that.text = "";
              that.pinlunList(that.index);
              uni.showToast({
                title: "发布成功",
                duration: 2000,
                icon: "none",
              });
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    replay(item) {
      this.huifu = true;
      this.rName = item.realName;
      this.huifuId = item.id;
    },
    pinlunImgDa(img, index) {
      uni.previewImage({
        urls: img,
        current: index,
        loop: true,
      });
    },
    pinlunList(index) {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url:
            "h5/orgMessage/infoComments?uid=069eae3f192b11e983f6fa163e4d6bc3",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            messageId: this.id,
            pageNumber: 1,
            pageSize: 100,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.comment = res.data.data.rows[index];
            that.commentList = res.data.data.rows[index].list;
            that.huifuId = res.data.data.rows[index].id;
            console.log();
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    // 删除评论
    pinlunShanchu(messageId, id, type) {
      uni.showModal({
        title: "提示",
        content: "是否确定删除该条评论",
        confirmColor: "#000000",
        cancelColor: "#007aff",
        cancelText: "再想想",
        success: (e) => {
          if (e.confirm) {
            let token = uni.getStorageSync("token");
            const that = this;
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url:
                  "h5/orgMessage/removeComment?uid=63755c41127811e981b5fa163e4d6bc3",
                method: "POST",
                header: {
                  "content-type": "application/json;charset=UTF-8",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": this.globalData.apiVersion,
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  messageId: messageId,
                  id: id,
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  if (type == 1) {
                    uni.showToast({
                      title: "评论删除成功",
                      duration: 2000,
                      icon: "none",
                    });
                    setTimeout(function () {
                      uni.reLaunch({
                        url: "/pages/index/trickDetail?id=" + that.id,
                      });
                    }, 1500);
                  } else {
                    uni.showToast({
                      title: "评论删除成功",
                      duration: 2000,
                      icon: "none",
                    });
                    that.pinlunList(that.index);
                  }
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title_ {
  width: 570rpx;
  display: flex;
  justify-content: space-between;
  image {
    width: 28rpx;
    height: 30rpx;
    margin-top: 3rpx;
  }
}

.roof {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 25rpx 35rpx;
  border-bottom: 2rpx solid #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  width: 750rpx;
  box-sizing: border-box;

  .left {
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 12rpx;
      vertical-align: center;
    }

    text {
      display: inline-block;
      position: relative;
      top: -3rpx;
    }
  }

  .right {
    margin-top: -30rpx;
    height: 41rpx;
    width: 41rpx;
  }
}
.input {
  width: 750rpx;
  height: 102rpx;
  background: rgba(255, 255, 255, 1);
  border: 2rpx solid rgba(238, 238, 238, 1);
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 32rpx;
  box-sizing: border-box;

  input {
    flex: 1;
    // width:585rpx;
    height: 66rpx;
    background: rgba(249, 249, 250, 1);
    border-radius: 16rpx;
    padding-left: 35rpx;
    box-sizing: border-box;
  }

  text {
    margin-left: 10rpx;
    display: inline-block;
    height: 102rpx;
    line-height: 102rpx;
    font-size: 34rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2168eb;
    width: 139rpx;
    text-align: center;
  }
}

.main {
  padding-bottom: 102rpx;
  padding-top: 100rpx;
}

.title {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 37rpx;
  margin-left: 32rpx;
  padding: 30rpx 0;
  padding-bottom: 15rpx;
}

.footer {
  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 30rpx;
  margin-left: 32rpx;
  padding: 40rpx 0;
}

.top {
  padding: 20rpx 32rpx;
  // border-bottom: 2rpx solid #eee;

  .item {
    margin-top: 30rpx;
    display: flex;
    .shanchu {
      position: absolute;
      right: 52rpx;
      top: 142rpx;

      image {
        width: 20rpx;
        height: 26rpx;
      }
    }
    .left {
      flex-shrink: 0;
      width: 70rpx;
      height: 70rpx;
      margin-right: 28rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .right {
      .one {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(80, 113, 173, 1);
        margin-bottom: 6rpx;

        text {
          color: #999999;
          display: inline-block;
          margin: 0 15rpx;
        }

        .image {
          margin-top: 5rpx;
          margin-right: 12rpx;
          float: right;
          width: 28rpx;
          height: 30rpx;
        }
      }

      .two {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 45rpx;
      }

      .imgs {
        display: flex;
        flex-wrap: wrap;
        margin-top: 8rpx;

        image {
          width: 155rpx;
          height: 155rpx;
          border-radius: 5rpx;
          margin-right: 10rpx;
        }
      }

      .time {
        display: flex;
        margin-top: 15rpx;

        .hour {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 33rpx;
          margin-right: 10rpx;

          text {
            display: inline-block;
            font-size: 25rpx;
            margin-left: 10rpx;
            position: relative;
            top: -9rpx;
          }
        }

        .huifu {
          margin-top: 3rpx;
          font-size: 20rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 30rpx;
          width: 54rpx;
          height: 30rpx;
          background-color: #eee;
          text-align: center;
          border-radius: 12rpx;
        }
      }
    }
  }
}
</style>
